<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>星级评分--第一种实现方式2</title>
    <style>
        body,ul,li{
            padding: 0;
            margin: 0;
        }
        li {
            list-style-type: none;
        }
        .rating {
            width: 160px;
            height: 32px;
            margin: 100px auto;
        }
        .rating-item {
            float: left;
            width: 32px;
            height: 32px;
            background: url("img/rating.png") no-repeat;
            cursor: pointer;
        }
    </style>
</head>
<body>

    <!-- 第一种实现方式 -->
    <ul id="rating" class="rating">
        <li class="rating-item" title="很不好"></li>
        <li class="rating-item" title="不好"></li>
        <li class="rating-item" title="一般"></li>
        <li class="rating-item" title="好"></li>
        <li class="rating-item" title="很好"></li>
    </ul>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        var rating = (function(){
            // 点亮
            var lightOn = function ($item, num) {
                $item.each(function(index) {
                    if (index < num) {
                        $(this).css('background-position', '0 -40px')
                    } else {
                        $(this).css('background-position', '0 0')
                    }
                })
            }
            // 初始化函数
            var init = function(el, num){
                // 初始化点亮 2颗星星
                var $rating = $(el),
                    $item = $rating.find('.rating-item');

                // 初始化
                lightOn($item, num)

                // 事件绑定 事件委托的写法
                $rating.on('mouseover', '.rating-item', function() {
                    lightOn($item, $(this).index() + 1)
                }).on('click', '.rating-item', function() {
                    num = $(this).index() + 1
                }).on('mouseout', function () {
                    lightOn($item, num)
                })
            }
            // jQuery插件
            $.fn.extend({
                rating: function(num) {
                    return this.each(function() {
                        init(this, num)
                    })
                }
            })
            return {
                init: init
            }

        })()


        $('#rating').rating(4)

    </script>

</body>
</html>
